<template>
  <div>
    <div>
      <div class="day-title-box">一</div>
      <div class="day-title-box">二</div>
      <div class="day-title-box">三</div>
      <div class="day-title-box">四</div>
      <div class="day-title-box">五</div>
      <div class="day-title-box">六</div>
      <div class="day-title-box">日</div>
    </div>
    <div>
      <ul class="day-box" @click.stop="dayClick($event)">
        <li
          v-for="item in daysObj"
          :class="[item.date == props.value ? 'select-day' : item.class]"
          :key="item.date"
          :data-days="item.date"
        >
          {{ item.value }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "dayComponent",
};
</script>
<script setup>
import { computed } from "@vue/reactivity";
const moment = window.moment;
//eslint-disable-next-line
const props = defineProps({
  yearMonth: String,
  start: String,
  value: String,
  min: String,
  max: String,
});
//eslint-disable-next-line
const emit = defineEmits(["update:value"]);

let daysObj = computed(() => {
  let result = [];
  let startMoment = moment(props.start, "YYYYMMDD");
  let nowMoment = moment(props.yearMonth, "YYYYMM");
  let weekNumer = nowMoment.diff(startMoment, "days") % 7;
  if (weekNumer < 0) {
    weekNumer += 7;
  }
  if (weekNumer > 0) {
    let startOfMonth = moment(props.yearMonth, "YYYYMM").startOf("month");
    while (weekNumer > 0) {
      let momObj = startOfMonth.subtract(1, "days");
      let date = momObj.get("date");
      let str = momObj.format("YYYYMMDD");
      result.unshift({ value: date, class: "not-day", date: str });
      weekNumer--;
    }
  }
  let nowDateCount = moment(props.yearMonth, "YYYYMM")
    .endOf("month")
    .get("date");
  let index = 1;
  while (index <= nowDateCount) {
    let obj = { value: index };
    let nowDate =
      nowMoment.format("YYYYMM") + index.toString().padStart(2, "0");
    if (+nowDate < +props.min || +nowDate > +props.max) {
      obj.class = "not-day";
    } else {
      obj.class = "day";
    }
    obj.date = nowDate;
    result.push(obj);
    index++;
  }
  let monthEndDay = moment(props.yearMonth, "YYYYMM").endOf("month");
  weekNumer = monthEndDay.diff(startMoment, "days") % 7;
  if (weekNumer < 6) {
    while (weekNumer < 6) {
      let memObj = monthEndDay.add(1, "days");
      let date = memObj.get("date");
      let str = memObj.format("YYYYMMDD");
      result.push({ value: date, class: "not-day", date: str });
      weekNumer++;
    }
  }
  return result;
});
let dayClick = (event) => {
  let value = event.target.getAttribute("data-days");
  if (!event.target.className.includes("not-day")) {
    emit("update:value", `${value}`);
  }
};
</script>
<style lang="scss" scoped>
.day-title-box {
  width: 32px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
}
.day-box {
  list-style: none;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
}
.day {
  width: 32px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  cursor: pointer;
  border-radius: 4px;
}
.select-day {
  width: 32px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  cursor: pointer;
  border-radius: 4px;
  background: #357ebd;
}
.not-day {
  width: 32px;
  height: 32px;
  display: inline-block;
  line-height: 32px;
  color: #898989;
}
.day:hover {
  background: #eeeeee;
}
</style>
